<template>
  <div class='header-container'>
    <div class="item">{{ data[index].content }}</div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue';
const props = defineProps({
  data: {
    type: Object,
  },
  index: {
    type: String,
    default: () => {
      return 0
    }
  }
})
</script>
<style scoped lang='scss'>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item {
    flex: 1;
    height: 200px;
    background-color: aquamarine;
  }
}
</style>